<template>
  <div class="">
    <el-container v-if="topBarMenuList.length > 0">
      <el-header>
        <el-tabs>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane v-for="item in topBarMenuList[0].list" :key="item.menuId" :label="item.name"
                         :name="item.name"></el-tab-pane>
          </el-tabs>
        </el-tabs>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'layoutTopBar',
  data() {
    return {
      activeName: '',
      activeList: [],
    };
  },
  methods: {
    handleClick(tab) {
      const menu = this.activeList[tab.index];
      let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId ===
        menu.menuId)
      if (!route[0].meta.iframeUrl) {
        this.$router.replace({
          name: route[0].name,
        })
      }
    }
  },
  computed: {
    topBarMenuList: {
      get() {
        const menu = this.$store.state.common.topBarMenuList
        //默认取第1个
        if(menu.length > 0) {
          this.activeList = menu[0].list || [];
          this.activeName = menu[0].name || '';
        }
        return this.$store.state.common.topBarMenuList
      }
    }
  },
  watch: {},
  created() {

  },
  mounted() {
  },
};
</script>

<style scoped lang="less">

</style>
